import React from 'react'
import { useQuery } from 'remax'
import { Image, Text, View } from 'remax/one'
import { usePageEvent } from 'remax/macro'
import {
  Swiper,
  SwiperItem,
  previewImage,
  stopPullDownRefresh,
} from 'remax/wechat'
import { Icon, Row, Space } from 'annar'
import useCloud from '@/hooks/use-cloud'
import styles from './index.css'

export default () => {
  const { _id } = useQuery()
  const { data, mutate } = useCloud('list-promotion')

  usePageEvent('onPullDownRefresh', async () => {
    await mutate()
    stopPullDownRefresh()
  })

  const item = data?.find((v: WBG.Promotion) => v._id === _id)
  if (!item) {
    return null
  }

  const {
    name,
    description,
    imgUrls,
    price,
    originalPrice,
    quota,
    audit,
  }: WBG.Promotion = item

  return (
    <>
      <Swiper className={styles.topArea} indicatorDots autoplay circular>
        {imgUrls.map((v, i) => (
          <SwiperItem key={i}>
            <Image
              className={styles.topImg}
              src={v}
              mode="aspectFill"
              onTap={() => {
                previewImage({ urls: imgUrls, current: v })
              }}
            />
          </SwiperItem>
        ))}
      </Swiper>
      <Row className={styles.basicArea} justify="space-between" align="middle">
        <Space className={styles.basicZone} direction="vertical" size={12}>
          <View className="large-text ellipsis">{name}</View>
          <View className="small-text">{description}</View>
        </Space>
        <Space
          className={styles.auditZone}
          style={{
            background:
              audit?.status === 1
                ? '#52c41a'
                : audit?.status === 2
                ? '#f5222d'
                : '#fa8c16',
          }}
          direction="vertical"
          align="center"
          size={6}
        >
          <View className={styles.auditIcon}>
            {audit?.status === 1 ? (
              <Icon type="check" size="60px" color="#52c41a" />
            ) : audit?.status === 2 ? (
              <Icon type="close" size="60px" color="#f5222d" />
            ) : (
              <Icon type="more" size="60px" color="#fa8c16" />
            )}
          </View>
          <Text className={styles.auditText}>
            {audit?.status === 1
              ? '审核已通过'
              : audit?.status === 2
              ? '审核未通过'
              : '审核中'}
          </Text>
        </Space>
      </Row>
      <View className={styles.mainArea}>
        <Space className={styles.mainBox} direction="vertical" size={12}>
          <Text className="medium-text">本广告数据</Text>
          <Row justify="space-between">
            <View>
              <Icon type="moneybag" color="red" />
              <Text className="small-text">您的店通过这个广告产生的营业额</Text>
            </View>
            <View>
              <Text className="small-text">￥</Text>
              <Text className="large-text">0</Text>
            </View>
          </Row>
          <Row justify="space-between">
            <View>
              <Icon type="shop" color="blue" />
              <Text className="small-text">通过这个广告来到您店里的人数</Text>
            </View>
            <View>
              <Text className="large-text">0</Text>
              <Text className="small-text">人</Text>
            </View>
          </Row>
          <Row justify="space-between">
            <View>
              <Icon type="people" color="green" />
              <Text className="small-text">每日限额</Text>
            </View>
            <View>
              <Text className="large-text">{quota}</Text>
              <Text className="small-text">人</Text>
            </View>
          </Row>
          <Row justify="space-between">
            <View>
              <Icon type="recharge" color="orange" />
              <Text className="small-text">原价</Text>
            </View>
            <View>
              <Text className="small-text">￥</Text>
              <Text className="large-text">{originalPrice}</Text>
            </View>
          </Row>
          <Row justify="space-between">
            <View>
              <Icon type="recharge" color="orange" />
              <Text className="small-text">活动价</Text>
            </View>
            <View>
              <Text className="small-text">￥</Text>
              <Text className="large-text">{price}</Text>
            </View>
          </Row>
        </Space>
      </View>
      {audit?.status === 2 && (
        <Space className={styles.reasonArea} direction="vertical" size={12}>
          <Text className="medium-text">未通过原因</Text>
          <Text className="small-text">{audit?.reason}</Text>
        </Space>
      )}
    </>
  )
}
